<template>
  <h1>watch监听对象类型响应式数据</h1>
  <h1>person:{{person.name}}</h1>
  <button @click="changePerson">改变person的值</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import {ref , watch} from "vue"
  /*
  wacth监视一个对象类型响应数据(ref)
    - wacth如果监听的直接是ref对象，则需要书写深度监听(deep)才能监听到这个对象内部属性的变化，监听不到ref对象的改变
    - wacth如果监听的是ref对象的value，则默认监听的是这个对象内部属性的变化(默认进行深度监听)
    - wacth如果监听的是ref对象value中的某个属性,且这个属性值是一个对象的时候，监听的它内部属性的变化（默认进行深度监听）
    - wacth如果监视ref对象的value中的某个基本类型属性(wacth的第一个参数应该写为一个函数,返回被侦听的数据),一旦这个基本数据发生改变就能被侦听
    - wacth如果监听ref对象value中的某个对象类型(但是写成函数的形式),则可以监听当前属性的改变,但是如果要监听内部属性的改变,则需要深度监听

  ref中的value属性其实就是reactive创建的代理对象,规则和上边类似

  watch如果需要监视多个属性,则可以把第一个参数书写为数组
  */

  const person = ref({
    name: "刘二",
    age: 18,
    sex: "男",
    scrol: {
      math: 100,
      en: ["98" , "99" , "97"]
    }
  })
  const changePerson = () => {
      /* person.value = {
      name: "laoliu",
      age: 18,
      sex: "男",
        scrol: {
          math: 100,
          en: ["98" , "99" , "97"]
        }
      } */

      // person.value.name = "老六"

      // person.value.scrol.math++

      person.value.age++

      // person.value.scrol.math++

      person.value.scrol = {
      math: 100000,
      en: ["98" , "99" , "97"]
    }
  
  }
  
  //1.直接监听ref对象
  /* watch(person , (newval , oldval) => {
    console.log("watch执行了" , newval , oldval);
  }) */

  //2.监听ref对象的value
  /* watch(person.value , (newval , oldval) => {
    console.log("watch执行了" , newval , oldval);
  }) */

  //3.监听ref对象内部的类型是对象的属性
  /* watch(person.value.scrol , (newval , oldval) => {
    console.log("watch执行了" , newval , oldval);
  }) */

  //4.监听ref对象内部的类型是基本数据类型的属性
  /* watch(()=>person.value.age , (newval , oldval) => {
    console.log("watch执行了" , newval , oldval);
  }) */

  //5.监听ref对象中的对象类型的属性但是写成函数形式
  /* watch(()=>person.value.scrol , (newval , oldval)=>{
    console.log("watch执行了" , newval , oldval);
  } , {deep:true}) */

  //6.监听多个属性
  /* watch([()=>person.value.name , ()=>person.value.age , ()=>person.value.scrol] , (newval , oldval) => {
    console.log("watch执行了" , newval , oldval);
  } , {deep:true}) */

  //6.监听多个属性分开写·
  watch(()=>person.value.age , (newval , oldval)=>{
    console.log("watch执行了" , newval , oldval);
  })
  watch(()=>person.value.scrol , (newval , oldval)=>{
    console.log("watch执行了" , newval , oldval);
  })
  
</script>